<template>
  <div id="searchPageBox">
    <div style="fontSize:.37rem">
      <input 
        id="searchInput"
        type="text"
        placeholder="搜索平台"
        v-model="searchContent"
        @input="typeKeying"
        @click="toSearchPage"
        >
        <x-icon type="ios-search" size="30" class="iconSearch"></x-icon>
      <!-- <div class="fliterBox"> -->
        <img src="../../../../static/assets/filter.jpg" class="fliterPic" v-if="iSearchPage">
        <span @click="showR" v-if="iSearchPage" v-show="iSearchPage">筛选</span>
      <!-- </div> -->
      <FilterPlatform @close="close" ref="filterPlatform" @getFilter="getFilter"></FilterPlatform>
      <span style="margin-left:.4rem;font-size:.4rem" @click="backTo" v-show="!iSearchPage">取消</span>
    </div>
    <!-- <div id="hotSearch" v-if="showHot">
      <h3 style="line-height:.5rem">热门搜索</h3>
      <span 
        v-for="item in hotKey" 
        :key="item.id"
        class="hotKey" 
        v-text="item"
        @click="clickHot(item)"></span>
    </div> -->
    <div id="typingSearch" v-if="!showHot">
      <div 
        class="typingSearchRow vux-1px-b" 
        v-for="item in list" 
        :key="item.id"
        @click="clickHot(item.name,item.id)">
        <span class="imgBox">
          <img :src="item.logo">
        </span>
        <span>{{item.name}}</span>
      </div> 
    </div>
  </div>
</template>
<script>
import {getSearch} from '../../../service/getData'
import {setStore} from '../../../config/mUtils.js'
import { setTimeout } from 'timers';
import FilterPlatform from '../invest_pt/children/FilterPlatform'
import {getSDK} from '../../../service/wxShare.js'

export default {
  components:{
    FilterPlatform
  },
  beforeCreate(){
      getSDK()
    },
  data(){
    return {
      hotKey:['你我贷','拍拍贷','拍拍你我贷'],
      searchContent:'',
      showHot:true,
      list:[],
      iSearchPage:true,
    }
  },
  methods:{
    toSearchPage(){
      this.iSearchPage = false
      this.$emit('toSearch',true)
    },
    getFilter(data){
      // this.results = data
      // console.log(data);
      this.$emit('filterResult',data)
    },
    close(){
      this.showRight =false
    },
    showR(){
      this.$refs.filterPlatform.open();
    },
    backTo(){
      this.iSearchPage = true
      this.$emit('toSearch',false)
      this.list = []
      this.searchContent = ''
    },
    clickHot(val,id){
      this.searchContent = val
      this.showHot = true
      setStore('pt',id)
      this.$router.push('/platformDetail?cid='+id)
      this.searchContent=''
    },
    typeKeying(){
      console.log('this.searchContent: ', this.searchContent);
      this.showHot = false
      if(this.searchContent == ''){
        this.showHot = true
      }
      this.list = []
      if(this.searchContent.trim() != ''){
        getSearch(this.searchContent,'')
          .then(res=>{
            console.log(res)
            this.list = res.list
          })
      }
    }
  },
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

  #searchPageBox{
    margin: 0 auto;
    height: 1.3333rem;
    line-height: 1.3333rem;
    #searchInput{
      width: 7.7333rem;
      height: 0.7733rem;
      outline: none;
      box-sizing: border-box;
      color: #c7c7c7;
      border-radius: 2rem;
      font-size: .4rem;
      border: 1px solid transparent;
      padding-left: 1rem;
      background-color: #f1f1f1;
      // position: absolute;
      // left: .4rem;
    }
    // .fliterBox{
    //   padding-top: .5rem;
    // }
    .iconSearch{
      width:.5rem;
      height: .5rem;
      position: absolute;
      top: 0.4rem;
      left: 0.7rem;
    }
    #hotSearch{
      .hotKey{
        // box-sizing: border-box;
        height: 0.8267rem;
        line-height: 0.8267rem;
        padding: .1rem .2rem;
        font-size: .36rem;
        margin-right: .4rem;
        box-shadow:1px 1px 10px #e4dfdf;
      }
    }
    #typingSearch{
      .typingSearchRow{
        height: 1.4rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        span{
         font-size: .4rem;
        }
        .imgBox{
          width: 1rem;
          height: 1rem;
          // line-height: 1rem;
          // text-align: center;
          border-radius: 50%;
          background-color: #f1f1f1;
          // display: inline-block;
          margin-right: .3rem;
          .fx();
          img{
            width: 1rem;
            height: 0.5rem;
            // margin-top: 0.3rem;
          }
        }
      }
    }
    .fliterPic{
      width: .32rem;
      height: .32rem;
      margin-left: 1%;
    }
  }
</style>
